<template>
  <el-drawer
    :title="translate('bgklx')"
    :visible.sync="isShowCartType"
    size="50%"
  >
    <!-- <div class="app-main-title">
      变更会员等级
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{translate('backPage')}}
      </div>
    </div> -->
    <div class="card_list">
      <div
        v-for="(item, index) in vipTypes"
        :key="index"
        :class="[index == vipType ? 'select-style' : 'normal-style']"
        class="card-style"
        @click="selectCard(index)"
      >
        <img :src="item.showAvatar" alt="">
        <div class="card-name">
          <span>{{ item.cardName }}</span>
          <img
            v-if="index == vipType"
            src="@/assets/images/vip_sel.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <div class="mt20">
      <el-button
        v-preventReClick
        type="primary"
        :loading="subLoading"
        @click="onSubmit"
      >{{ translate("qd") }}</el-button>
      <el-button @click="goBack">{{ translate("cancel") }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { cardList, memberDetailInfo, CardTypeChangePost } from '@/api'
export default {
  data() {
    return {
      isShowCartType: false,
      subLoading: false,
      vipTypes: [],
      vipType: 0
    }
  },
  created() {
    // const id = this.$route.query.id || ''
    // this.getCardList(id)
  },
  methods: {
    selectCard(index) {
      this.vipType = index
    },
    goBack() {
      this.isShowCartType = false
    },
    onSubmit() {
      const { vipType } = this
      const param = {}
      param.memberId = this.$route.query.id
      param.cardTypeId = this.vipTypes[vipType].id
      this.subLoading = true
      CardTypeChangePost({ param }).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('bgcg'))
        this.goBack()
      }, () => {
        this.subLoading = false
      })
    },
    getInfo(id) {
      memberDetailInfo({ param: { memberId: id }}).then((res) => {
        if (res.errorCode !== '000000') return
        const info = res.record
        const index = this.vipTypes.findIndex(item => info.cardTypeId === item.id)
        if (index > 0) {
          this.vipType = index
        } else {
          this.vipType = 0
        }
      })
    },
    getCardList(id) {
      // 获取卡类型列表
      cardList({
        pagination: {
          page: 1,
          rows: 1000
        },
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const arr = res.recordList || []
            this.vipTypes = arr.filter(item => item.isnormal !== '1' && item.channel !== '1_0')
            this.getInfo(id)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.btns {
  text-align: center;
}
.card_list {
  display: flex;
  flex-wrap: wrap;
}
.card-style {
  width: 158px;
  height: 134px;
  background: #ffffff;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 12px;
  cursor: pointer;
  img {
    width: 134px;
    height: 80px;
    display: flex;
    margin-bottom: 12px;
  }
  .card-name {
    display: flex;
    justify-content: space-between;
    color: #222;
    font-size: 14px;
    line-height: 18px;
    img {
      width: 16px;
      height: 16px;
    }
    // background-color: red;
  }
}
.select-style {
  border: solid 1px $primaryColor;
}
.normal-style {
  border: solid 1px #d8d8d8;
}
</style>
